{% extends 'layout/mange.html' %}

{% block title %} 项目仪表盘 {% endblock %}

{% block css %}
    <style>
        .stat-card {
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .stat-card h3 {
            margin-top: 0;
            font-size: 18px;
            color: #666;
        }
        .stat-value {
            font-size: 32px;
            font-weight: bold;
            margin: 10px 0;
        }
        .stat-percent {
            font-size: 16px;
        }
        .chart-container {
            width: 100%;
            height: 300px;
            margin-bottom: 30px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <h2>项目仪表盘</h2>
                <hr>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="row">
            <div class="col-md-3">
                <div class="stat-card bg-primary text-white">
                    <h3>总BUG数</h3>
                    <div class="stat-value">{{ total_bugs }}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card bg-success text-white">
                    <h3>已解决BUG</h3>
                    <div class="stat-value">{{ resolved_bugs }}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card bg-info text-white">
                    <h3>解决率</h3>
                    <div class="stat-value">{{ resolved_rate|floatformat:2 }}%</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card bg-warning text-white">
                    <h3>活跃项目</h3>
                    <div class="stat-value">{{ projects.count }}</div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">最近7天BUG趋势</h3>
                    </div>
                    <div class="panel-body">
                        <div class="chart-container">
                            <canvas id="bugsTrendChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">BUG状态分布</h3>
                    </div>
                    <div class="panel-body">
                        <div class="chart-container">
                            <canvas id="bugsStatusChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 项目列表 -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">项目列表</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>项目名称</th>
                                    <th>创建时间</th>
                                    <th>BUG总数</th>
                                    <th>已解决</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for project in projects %}
                                <tr>
                                    <td><a href="{% url 'project_detail' project.id %}">{{ project.name }}</a></td>
                                    <td>{{ project.create_datetime|date:'Y-m-d' }}</td>
                                    <td>{{ project.bug_set.count }}</td>
                                    <td>{{ project.resolved_bug_count }}</td>
                                    <td>
                                        <a href="{% url 'bug_list' project.id %}" class="btn btn-xs btn-info">查看BUG</a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center">暂无项目</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // 最近7天BUG趋势图表
        const trendCtx = document.getElementById('bugsTrendChart').getContext('2d');
        const trendData = {
            labels: [{% for bug in recent_bugs %}'{{ bug.date }}',{% endfor %}],
            datasets: [{
                label: 'BUG数量',
                data: [{% for bug in recent_bugs %}{{ bug.count }},{% endfor %}],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 2,
                tension: 0.1
            }]
        };
        const trendChart = new Chart(trendCtx, {
            type: 'line',
            data: trendData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });

        // BUG状态分布图表
        const statusCtx = document.getElementById('bugsStatusChart').getContext('2d');
        const statusData = {
            labels: [{% for item in bugs_by_status %}'{{ item.status__name }}',{% endfor %}],
            datasets: [{
                label: 'BUG数量',
                data: [{% for item in bugs_by_status %}{{ item.count }},{% endfor %}],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(153, 102, 255, 0.7)',
                    'rgba(255, 159, 64, 0.7)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        };
        const statusChart = new Chart(statusCtx, {
            type: 'pie',
            data: statusData,
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    </script>
{% endblock %}